<template>
	<view>
        <view class="chat-list">
			<view class="chat" v-for="(chat,index) in chatList" :key="index">
				<view class="row" @tap="toChat(chat)">
					<view class="left">
						<view v-if="chat.roomInfo.roomType == 1" class="logo-avatar">
							<image
								:key="index"
								v-for="(item,index) in chat.logoAvatar"
								:src="item"
								mode="aspectFill">
							</image>
						</view>
						<image v-else :src="chat.roomLogo ? chat.roomLogo : '/static/missing-face.png'"></image>
					</view>
					<view class="right">
						<view class="top">
							<view class="username">{{chat.roomTitle}}</view>
							<view class="time">{{chat.createTime | formatTime('MM-dd hh:mm')}}</view>
						</view>
						<view class="bottom">
							<view class="msg">{{chat.lastMsg}}</view>
							<view class="tis" v-if="chat.unread>0">{{chat.unread}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hasOnLoad: false,
				chatList:{}
			}
		},
		// 下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
		    setTimeout(function () {
		        uni.stopPullDownRefresh();
		    }, 1000);
		},
		onShow() {
			if (this.hasOnLoad) {
				this.loadData();
			}
		},
		async onLoad() {
			this.hasOnLoad = true;
			let that = this;
			getApp().globalData.callback = function (res) {
				console.log('收到服务器内容', res);
				let data = JSON.parse(res.data);
				if (data.code == 200) {
					if (data.data.recentData) {
						let roomId = data.data.recentData.roomId;
						if (that.chatList[roomId]) {
							that.chatList[roomId] = data.data.recentData;
						} else {
							that.chatList = Object.assign(
								{roomId: data.data.recentData},
								that.chatList
							);
						}
					}
				}
			}
			this.loadData();
		},
		methods: {
			async loadData(){
				let res = await this.util.request({
					url: '/v1/chat/recent/lists',
					method: 'get',
				});
				if (res.code == 200) {
					this.chatList = res.data.dataList;
				} else {
					this.util.showToast({
						title: res.msg,
						icon: 'loading',
						duration: 2000
					});
				}
			},
			// 发送和接收 websocket 消息
			sendSocketMessage: function(msg) {
				let that = this
				return new Promise((resolve, reject) => {
					getApp().sendSocketMessage(msg);
				})
			},
			toChat(chat){
				uni.navigateTo({
					url:"/pages/chat/room/msg?roomId=" + chat.roomId + '&roomTitle=' + chat.roomTitle
				})
			}
		}
	}
</script>

<style  lang="scss">
	page {
		background-color: #fff;
	}
	.chat-list {
		width: 94%;
		padding: 0 3%;
		.chat{
			width: 100%;
			height: 100upx;
			padding: 20upx 0;
			border-bottom: solid 1upx #eaeaea;
			.row {
				display: flex;
				justify-content: flex-start;
				.left{
					flex-shrink:0;
					width: 100upx;
					height: 100upx;
					over-flow: hidden;
					.logo-avatar {
						width: 94upx;
						height: 94upx;
						background-color: #EEEEEE;
						display: flex;
						justify-content: space-around;
						padding: 6upx;
						image {
							width: 29upx;
							height: 29upx;
							border-radius: 0upx;
						}
					}
					image {
						width: 100upx;
						height: 100upx;
						border-radius: 20upx;
					}
				}
				.right {
					flex-shrink:1;
					width: 98%;
					padding-left: 2%;
					.top {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: flex-end;
						.usernam {
							font-size: 26upx;
						}
						.time {
							font-size: 22upx;
							color: #bebebe;
						}
					}
					.bottom {
						width: 100%;
						height: 40upx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.msg {
							font-size: 25upx;
							color: #777;
						}
						.tis {
							width: 35upx;
							height: 35upx;
							font-size: 22upx;
							display: flex;
							justify-content: center;
							align-items: center;
							background-color: #eb4d3d;
							color: #fff;
							border-radius: 100%;
						}
					}
				}
			}
		}
	}
</style>
